<template>
    <div class="wrapper customer-box">
        <el-form label-position="top" :inline="true" :model="filterData" class="demo-form-inline">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="统计日期:">
                        <el-date-picker
                                v-model="dateRange"
                                @change="dateChange"
                                value-format="yyyy-MM-dd"
                                type="daterange"  size="small"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="状态:">
                        <el-select v-model="filterData.status" multiple @change="statusChange" @remove-tag="statusRemove"  size="small">
                            <el-option
                                    v-for="item in optionsStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="渠道:">
                        <el-select v-model="filterData.channel" multiple @change="channelChange" @remove-tag="channelRemove"  size="small">
                            <el-option
                                    v-for="item in optionsChannel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" icon="el-icon-delete" @click="clearFilter">清空筛选条件</el-button>
                        <el-button size="small" type="primary" icon="el-icon-search" @click="search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row class="customer_row">
            <el-table :data="statisticsData" v-model="statisticsData" style="width: 100%;"
                      highlight-current-row
                      :summary-method="getSummaries"
                      show-summary
            >
                <el-table-column prop="channel" label="渠道名称" align="center" min-width='95'></el-table-column>
                <el-table-column prop="untreated" label="未处理" align="center" min-width='95'></el-table-column>
                <el-table-column prop="refuse" label="拒接" align="center" min-width='95'></el-table-column>
                <el-table-column prop="noIntention" label="无意向" align="center" min-width='95'></el-table-column>
                <el-table-column prop="canAssigned" label="可分配" align="center" min-width='95'></el-table-column>
                <el-table-column prop="distribution" label="直接分配" align="center" min-width='95'></el-table-column>
                <el-table-column prop="customer" label="已合作客户" align="center" min-width='95'></el-table-column>
                <el-table-column prop="zhuangdan" label="撞单" align="center" min-width='95'></el-table-column>
                <el-table-column prop="assigned" label="已分配" align="center" min-width='95'></el-table-column>
                <el-table-column prop="total" label="总计" align="center" min-width='95'></el-table-column>

            </el-table>
        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Row, Col, Form, FormItem, Input, Select, Option, DatePicker, ButtonGroup,
        Button, Table, TableColumn, Message, MessageBox, Pagination,
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {SHOW_MESSAGE,MESSAGE_IDS,MESSAGE_NAMES,MESSAGE_TELS} from '../../store/mutation-types/template/index';
    import {getDate , returnDate,getArraySub , getLevelName, validTel, setToken, getCookie ,uniqueArr} from '../../utils/auth'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);

    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Pagination);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;

    export default {
        scrollToTop: false,
        head(){
            return {
                title: this.title
            }
        },
        data () {
            return {
                title: '推广分配统计',
                tabName: '推广分配统计',
                dateRange: [],
                filterData: {
                    startDate: '',
                    endDate: '',
                    status: [],
                    channel: []
                },
                statisticsData: [
                    {
                        channel: '百度',
                        untreated: '584',
                        refuse: '786',
                        noIntention: '124',
                        canAssigned: '1765',
                        distribution: '677',
                        customer: '467',
                        zhuangdan: '8768',
                        assigned: '3543',
                        total: '435',
                    }
                ],
                optionsStatus: [
                    {
                        value: '0',
                        label: '全部',
                        disabled: false
                    },{
                        value: '1',
                        label: '未处理',
                        disabled: false
                    },{
                        value: '2',
                        label: '拒接',
                        disabled: false
                    },{
                        value: '3',
                        label: '无意向',
                        disabled: false
                    },{
                        value: '4',
                        label: '可分配',
                        disabled: false
                    },{
                        value: '5',
                        label: '直接分配',
                        disabled: false
                    },{
                        value: '6',
                        label: '已合作客户',
                        disabled: false
                    },{
                        value: '7',
                        label: '撞单',
                        disabled: false
                    },{
                        value: '8',
                        label: '已分配',
                        disabled: false
                    },
                ],
                optionsChannel: [
                    {
                        value: '0',
                        label: '全部',
                        disabled: false
                    },
                    {
                        value: '1',
                        label: '百度',
                        disabled: false
                    },
                    {
                        value: '2',
                        label: '360',
                        disabled: false
                    },
                    {
                        value: '3',
                        label: '广点通',
                        disabled: false
                    },
                    {
                        value: '4',
                        label: '搜狗',
                        disabled: false
                    },
                    {
                        value: '5',
                        label: 'facebook',
                        disabled: false
                    },{
                        value: '6',
                        label: '今日头条',
                        disabled: false
                    },
                ]
            }
        },
        computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList',
            })
        },

        methods: {
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                    } else {
                        sums[index] = 'N/A';
                    }
                });

                return sums;
            },
            dateChange(){
                this.filterData.startDate = this.dateRange[0];
                this.filterData.endDate = this.dateRange[1];
            },
            statusChange(val){
                if(val[val.length-1] == 0) {
                    this.filterData.status = ['0'];
                    for(let i=1;i<this.optionsStatus.length;i++) {
                        this.optionsStatus[i].disabled = true;
                    }
                }
            },
            channelChange(val){
                if(val[val.length-1] == 0) {
                    this.filterData.channel = ['0'];
                    for(let i=1;i<this.optionsChannel.length;i++) {
                        this.optionsChannel[i].disabled = true;
                    }
                }
            },
            statusRemove(val) {
                if(val.currentValue == 0) {
                    this.filterData.status = [];
                    for(let i=1;i<this.optionsStatus.length;i++) {
                        this.optionsStatus[i].disabled = false;
                    }
                }
            },
            channelRemove(val) {
                if(val.currentValue == 0) {
                    this.filterData.channel = [];
                    for(let i=1;i<this.optionsChannel.length;i++) {
                        this.optionsChannel[i].disabled = false;
                    }
                }
            },
            clearFilter() {
                this.dateRange = [];
                this.filterData.startDate = '';
                this.filterData.endDate = '';
                this.filterData.status = [];
                this.filterData.channel = [];
                for(let i=1;i<this.optionsStatus.length;i++) {
                    this.optionsStatus[i].disabled = false;
                }
                for(let i=1;i<this.optionsChannel.length;i++) {
                    this.optionsChannel[i].disabled = false;
                }
            },
            search() {

            }
        },
        created(){
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        },

        mounted(){

        }
    }

</script>

<style lang="scss">
    html,body{
        height: 100%;
    }
    .customer-box{

    }



</style>